<template lang="pug">
  .scene(
    v-show="showScene",
    @dblclick="handleToggleScene",
    :class="showScene ? 'animated bounceInUp' : ''")
    Scroll.scene-wrap(v-if="getSceneList", :data="getSceneList", :scrollX="true", ref='scrollSceneWrap')
      ul.scene-list(ref="sceneListWrap")
        el-tooltip(
          v-for="(item, index) in getSceneList",
          :key="index",
          effect="dark",
          :content="item.dec",
          :disabled="item.dec ? false : true",
          placement="top")
          li.scene-list-item(
            ref="sceneItem",
            :class="['item', {'active': sceneIndex == index && !item.isLock}]",
            :style="sceneIndex == index ? getBdColorStyle : '' ",
            @click="handleSceneSwitch(item, index)")
            i.iconfont.icon-info(v-if="item.dec", @click.stop='showSceneInfo(item.title, item.dec)')
            .lock(v-if="item.isLock")
              i.iconfont &#xe6f0;
            .img-box
              img(:src="item.full_thumb_url", alt="")
            p.text(:style="sceneIndex == index ? getColorStyle : ''") {{item.title}}


    div.pos-r(v-if="getSceneGroup && showSceneGroup")
      Scroll.group-wrap(:data="getSceneGroup", :scrollX="true", ref='scrollGroupWrap')
        .scene-group(
          ref="sceneGroupWrap")
          .scene-group-item(
            ref="sceneGroupItem",
            v-for="(group, index) in getSceneGroup",
            :key="index",
            :title="group.album",
            @click="handleGroupSwitch(group.groupid, index)")
            .label.omit(
              :class="{'active': sceneGroupIndex == index}",
              :style="sceneGroupIndex == index ? getBgColorStyle : '' ")
              span(
                :class="{'active': sceneGroupIndex == index}",
                :style="sceneGroupIndex == index ? getColorStyle : '' ") {{group.album}}

</template>

<script>
import Scroll from 'Comps/Scroll'
import themeMixin from '@/mixins/theme'
import sceneMixin from '@/mixins/scene'

export default {
  name: 'sceneGroupE',
  mixins: [themeMixin, sceneMixin],
  components: {
    Scroll
  }
}
</script>

<style lang="stylus">
@import '../../../assets/styles/color.styl'
@import '../../../assets/styles/scene.styl'

.new-template
  .scene
    padding: 0
    .scene-wrap
      overflow: hidden
      &:hover
        .scene-prev-btn, .scene-next-btn
          display: block
    .scene-list
      padding: 6px 0
      .scene-list-item
        position: relative
        width: 100px
        height: 86px
        border: 1px solid $border-color
        border-radius: 6px
        text-align: center
        &.active
          border: 1px solid $theme4-color
          .text
            color: $theme4-color
        & > .lock
          line-height: 80px
        .text
          font-size: 14px

    .scene-btn
      $width = 50px
      top: 50%
      transform: translateY(-50%)
      width: $width
      height: $width
      line-height: $width
      i
        color: $white
        font-size: 30px
    .scene-prev
      left: 20px
    .scene-next
      right: 20px

    .scene-group
      margin: 0
      padding: 10px 0
      border-top: 1px solid $border-color
      text-align: center
      .scene-group-item
        height: 30px
        box-sizing: border-box
        .label
          min-width: 50px
          max-width: 80px
          height: 30px
          line-height: 30px
          margin-right: 10px
          padding: 0 10px 0 40px
          font-size: 14px
          background-image: url('/static/images/scene_icon.png')
          background-repeat: no-repeat
          background-position: 10px
          background-color: rgba($theme4-color, .4)
          &.active
            background-color: rgba($theme4-color, .8)

    // 无分组
    .no-tab
      .scene-group
        height: auto
</style>
